
import React from 'react';
import { 
  FileText, 
  BarChart3, 
  Search, 
  Upload, 
  Clock, 
  CheckCircle, 
  AlertCircle 
} from 'lucide-react';
import { Link } from 'react-router-dom';
import DashboardCard from '@/components/DashboardCard';
import { useInView } from '@/utils/animation';
import { Button } from "@/components/ui/button";

const ReportAnalysis = () => {
  const { ref: headerRef, isInView: headerIsVisible } = useInView();
  const { ref: uploadRef, isInView: uploadIsVisible } = useInView(0.1);
  const { ref: reportsRef, isInView: reportsAreVisible } = useInView(0.1);

  // Recent reports data
  const recentReports = [
    {
      title: '血常规检查',
      date: '2023-06-15',
      status: 'completed',
      abnormal: false,
      icon: <FileText className="h-5 w-5" />,
      gradient: 'linear-gradient(120deg, #4FD1C5 0%, #63B3ED 100%)',
      id: 'blood-routine-001'
    },
    {
      title: '肝功能检查',
      date: '2023-05-30',
      status: 'completed',
      abnormal: true,
      icon: <FileText className="h-5 w-5" />,
      gradient: 'linear-gradient(120deg, #F87171 0%, #FCA5A5 100%)',
      id: 'liver-function-001'
    },
    {
      title: '心电图检查',
      date: '2023-04-22',
      status: 'completed',
      abnormal: false,
      icon: <FileText className="h-5 w-5" />,
      gradient: 'linear-gradient(120deg, #A78BFA 0%, #C4B5FD 100%)',
      id: 'ecg-001'
    },
    {
      title: '尿常规检查',
      date: '2023-03-10',
      status: 'completed',
      abnormal: false,
      icon: <FileText className="h-5 w-5" />,
      gradient: 'linear-gradient(120deg, #FBBF24 0%, #FCD34D 100%)',
      id: 'urine-routine-001'
    }
  ];

  // Generate a URL-friendly ID from the report title
  const getReportUrl = (report) => {
    return `/report-analysis/${report.title}`;
  };

  return (
    <div className="min-h-screen pt-20 px-6 md:px-10 pb-10">
      {/* Header Section */}
      <section 
        ref={headerRef}
        className={`max-w-7xl mx-auto mb-12 transition-all duration-700 delay-100 ${
          headerIsVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <div className="text-center">
          <span className="inline-block bg-primary/10 text-primary px-4 py-1.5 rounded-full text-sm font-medium mb-4">
            报告解读
          </span>
          <h1 className="text-3xl md:text-4xl font-bold mb-4">
            专业解析您的健康报告
          </h1>
          <p className="text-foreground/70 max-w-2xl mx-auto">
            上传您的检查报告，获取专业医学解读，了解健康状况
          </p>
        </div>
      </section>

      {/* Search and Filter */}
      <section className="max-w-7xl mx-auto mb-10">
        <div className="glass-card rounded-xl p-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-foreground/50 h-5 w-5" />
              <input 
                type="text" 
                placeholder="搜索报告..." 
                className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-border bg-white focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all"
              />
            </div>
            <div className="flex gap-4">
              <select className="px-4 py-2.5 rounded-lg border border-border bg-white focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                <option value="">全部类型</option>
                <option value="blood">血液检查</option>
                <option value="imaging">影像检查</option>
                <option value="function">功能检查</option>
              </select>
              <select className="px-4 py-2.5 rounded-lg border border-border bg-white focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                <option value="">全部时间</option>
                <option value="week">本周</option>
                <option value="month">本月</option>
                <option value="year">今年</option>
              </select>
            </div>
          </div>
        </div>
      </section>

      {/* Upload Report */}
      <section 
        ref={uploadRef}
        className={`max-w-7xl mx-auto mb-10 transition-all duration-700 delay-200 ${
          uploadIsVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <div className="glass-card rounded-xl p-6 border-2 border-dashed border-border">
          <div className="text-center py-10">
            <Upload className="h-12 w-12 text-primary mx-auto mb-4" />
            <h3 className="text-xl font-medium mb-2">上传您的健康报告</h3>
            <p className="text-foreground/70 mb-6 max-w-md mx-auto">
              支持 PDF、JPG、PNG 格式文件，大小不超过 10MB
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-lg transition-colors">
                选择文件上传
              </button>
              <button className="bg-white hover:bg-gray-50 border border-border px-6 py-2.5 rounded-lg transition-colors">
                拍照上传
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Recent Reports */}
      <section 
        ref={reportsRef}
        className={`max-w-7xl mx-auto transition-all duration-700 delay-300 ${
          reportsAreVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <h2 className="text-2xl font-semibold mb-6">最近报告</h2>
        <div className="grid md:grid-cols-2 gap-6">
          {recentReports.map((report, index) => (
            <DashboardCard
              key={report.title}
              title={report.title}
              icon={report.icon}
              gradient={report.gradient}
              className={`transition-all duration-500 delay-${index * 100}`}
            >
              <div className="mt-4">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center">
                    <Clock className="h-4 w-4 text-foreground/50 mr-1.5" />
                    <span className="text-sm text-foreground/70">{report.date}</span>
                  </div>
                  <div className="flex items-center">
                    {report.status === 'completed' ? (
                      <>
                        <CheckCircle className="h-4 w-4 text-green-500 mr-1.5" />
                        <span className="text-sm text-green-500">已解读</span>
                      </>
                    ) : (
                      <>
                        <Clock className="h-4 w-4 text-amber-500 mr-1.5" />
                        <span className="text-sm text-amber-500">解读中</span>
                      </>
                    )}
                  </div>
                </div>
                
                {report.abnormal && (
                  <div className="mb-4 p-2 bg-red-50 text-red-600 rounded-md flex items-center">
                    <AlertCircle className="h-4 w-4 mr-1.5" />
                    <span className="text-sm">发现异常指标</span>
                  </div>
                )}
                
                <div className="flex justify-between items-center">
                  <Button variant="link" className="text-sm text-primary font-medium px-0" asChild>
                    <Link to={getReportUrl(report)}>查看详情</Link>
                  </Button>
                  <Button variant="link" className="text-sm text-foreground/70 px-0">下载报告</Button>
                </div>
              </div>
            </DashboardCard>
          ))}
        </div>
      </section>

      {/* Stats Section */}
      <section className="max-w-7xl mx-auto mt-16">
        <div className="glass-card rounded-xl p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold">健康指标趋势</h2>
            <button className="text-sm text-primary font-medium">查看全部</button>
          </div>
          <div className="h-80 flex items-center justify-center">
            <div className="text-center">
              <BarChart3 className="h-10 w-10 text-muted-foreground mx-auto mb-2" />
              <p className="text-muted-foreground">上传更多报告以查看您的健康指标趋势</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default ReportAnalysis;
